<template>
	<view>
		<view class="form-box">
			<view class="mt32 c-tips">取消订单的原因:</view>
			<u-form ref="uForm" label-width="130rpx" :model="form">
				<u-form-item label="" prop="reason">
					<u-radio-group v-model="form.reason" placement="column">
						<u-radio v-for="(item,index) in reasons" :customStyle="{marginBottom: '8rpx', marginRight: '8rpx'}" :label="item" :name="item"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="" prop="remark" v-if="form.reason==reasons[3]">
					<u-textarea v-model="form.remark" placeholder="请输入其他原因信息" ></u-textarea>
				</u-form-item>
			</u-form>
		</view>
		<view class="submit">
			<u-button type="success" @click="submit">确定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					reason: [{
						required: true,
						message: '不能为空',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				form: {
					orderId: undefined,
					reason: undefined,
					remark: undefined,
				},
				reasons: ['下错单了','重复下单','不需要了','其他原因'],
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			this.form.orderId = e.orderId
		},
		mounted() {},
		methods: {
			submit() {
				if(!this.form.reason) {
					uni.showToast({
						title: '取消原因不能为空',
						icon: 'none'
					})
					return
				}
				if(this.form.reason==this.reasons[3] && !this.form.remark) {
					uni.showToast({
						title: '备注信息不能为空',
						icon: 'none'
					})
					return
				}
				this.$refs.uForm.validate().then(res => {
					this._submit()
				}).catch(errors => {
					uni.showToast({
						title: '表单请填写完整',
						icon: 'none'
					})
				})
			},
			async _submit() {
				uni.showLoading({
					title: '',
				})
				const res = await this.$wxapi.deleteOrder(this.token,this.form.orderId,(this.form.reason==this.reasons[3])?this.form.remark:this.form.reason)
				uni.hideLoading()
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '提交成功',
					})
					// 将已售后的订单id保存到storage，订单列表页面特殊处理
					let refundApplyedOrderIds = uni.getStorageSync('refundApplyedOrderIds')
					if(!refundApplyedOrderIds) {
						refundApplyedOrderIds = []
					}
					refundApplyedOrderIds.push(this.form.orderId)
					uni.setStorageSync('refundApplyedOrderIds', refundApplyedOrderIds)
					uni.navigateBack()
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.form-box {
		padding: 0 32rpx;
	}
	.submit {
		padding: 32rpx;
	}
</style>
